TypeScriptãå ç¢ãªåå®å šæ§ãæäŸãããšã©ãŒãåæžããã³ãŒãã®ä¿å®æ§ãåäžãããããšã§ãé£åç§åŠãšæ é€åæãã©ã®ããã«åŒ·åããããæ¢ããŸãã
TypeScripté£åç§åŠïŒåå®å šæ§ã«ããæ é€åæ
仿¥ã®ããŒã¿é§ååã®äžçã«ãããŠãé£åç§åŠãšæ é€åæã¯ãæ£ç¢ºã§ä¿¡é Œæ§ã®é«ããœãããŠã§ã¢ã«å€§ããäŸåããŠããŸããã¬ã·ãã®æ 逿åãèšç®ããããšãããå€§èŠæš¡ãªé£åæåããŒã¿ã»ãããåæããããšãŸã§ããœãããŠã§ã¢ã¯éèŠãªåœ¹å²ãæãããŸããããããåŸæ¥ã®JavaScriptã¯æè»æ§ãããäžæ¹ã§ããã®åçãªåä»ãã®ããã«å®è¡æãšã©ãŒãåŒãèµ·ããããšããããããŸããJavaScriptã®ã¹ãŒããŒã»ããã§ãããéçåä»ãã远å ããTypeScriptã¯ãé£åç§åŠã¢ããªã±ãŒã·ã§ã³ã®å ç¢æ§ãšä¿å®æ§ãåäžãããããã®åŒ·åãªãœãªã¥ãŒã·ã§ã³ãæäŸããŸãããã®ããã°èšäºã§ã¯ãTypeScriptãæŽ»çšããŠãããå®å šã§ä¿¡é Œæ§ãé«ããä¿å®ããããæ é€åæããŒã«ãæ§ç¯ããæ¹æ³ãæ¢ããŸãã
æ é€åæã«ãããåå®å šæ§ã®éèŠæ§
æ é€åæã«ã¯ãæ°å€ïŒã«ããªãŒãã°ã©ã ãããªã°ã©ã ïŒãæååïŒé£ååãåäœïŒãè€éãªãªããžã§ã¯ãïŒã¬ã·ããé£åæå衚ïŒãªã©ãããŸããŸãªããŒã¿åãæ±ããŸããäžæ£ãªããŒã¿åãäºæããªãå€ã¯ãèšç®ãåæã«ãããé倧ãªãšã©ãŒã«ã€ãªããå¯èœæ§ããããå ¬è¡è¡çãé£äºã«é¢ããæšå¥šäºé ã«åœ±é¿ãäžããå¯èœæ§ããããŸããäŸãã°ãå å·¥é£åã®ãããªãŠã 嫿éã®èšç®ãã¹ã¯ãé«è¡å§çã®å人ã«ãšã£ãŠæ·±å»ãªçµæãããããå¯èœæ§ããããŸãã
TypeScriptãæäŸããåå®å šæ§ã¯ãã³ã³ãã€ã«æã«åãã§ãã¯ã匷å¶ããããšã§ããããã®ãšã©ãŒãé²ãã®ã«åœ¹ç«ã¡ãŸããããã¯ãã³ãŒããå®è¡ãããåã«ã³ã³ãã€ã©ãåé¢é£ã®ãšã©ãŒããã£ããããå®è¡æã®äºæãã¬äºæ ã®ãªã¹ã¯ãäœæžããããšãæå³ããŸãããã颿°ãé£åã®çæ°Žåç©å«æéãæ°å€ãšããŠæåŸ ããŠããã®ã«ã代ããã«æååãåãåã£ãã·ããªãªãèããŠã¿ãŸããããJavaScriptã§ã¯ãããã¯äºæããªãåäœãå®è¡æãšã©ãŒã«ã€ãªããå¯èœæ§ããããŸããTypeScriptã§ã¯ãã³ã³ãã€ã©ããã®åã®äžäžèŽãèŠåããéçºè ããããã€åã«åé¡ãä¿®æ£ã§ããããã«ããŸãã
é£åç§åŠã§TypeScriptã䜿çšããå©ç¹
- ã³ãŒãã®ä¿¡é Œæ§åäžïŒ åãã§ãã¯ã¯éçºããã»ã¹ã®æ©ã段éã§ãšã©ãŒãæ€åºããããä¿¡é Œæ§ãé«ãå®å®ããã¢ããªã±ãŒã·ã§ã³ã«ã€ãªãããŸãã
- ä¿å®æ§ã®åŒ·åïŒ éçåä»ãã«ãããç¹ã«å€§èŠæš¡ã§è€éãªãããžã§ã¯ãã«ãããŠãã³ãŒãã®çè§£ãšä¿å®ã容æã«ãªããŸããåæ³šéã¯ããã¥ã¡ã³ããšããŠæ©èœããå倿°ã颿°ã®ãã©ã¡ãŒã¿ãã©ã®åã®ããŒã¿ãä¿æããããšãæåŸ ãããŠããããæç¢ºã«ããŸãã
- ãªãã¡ã¯ã¿ãªã³ã°ã®å®å šæ§ïŒ TypeScriptã®åã·ã¹ãã ã¯ãã³ãŒãã®ãªãã¡ã¯ã¿ãªã³ã°ãããå®å šãã€å®¹æã«ããŸãã倿°ã颿°ã®åã倿Žãããšãã³ã³ãã€ã©ã¯ã³ãŒãå ã§æŽæ°ãå¿ èŠãªãã¹ãŠã®ç®æãç¹å®ããŸãã
- ããè¯ãã³ã©ãã¬ãŒã·ã§ã³ïŒ åæ³šéã¯éçºè éã®ã³ãã¥ãã±ãŒã·ã§ã³ãæ¹åãããããžã§ã¯ãã§ã®å ±åäœæ¥ã容æã«ããŸãã
- åªããIDEãµããŒãïŒ TypeScriptã¯ããªãŒãã³ã³ããªãŒããåãã§ãã¯ããªãã¡ã¯ã¿ãªã³ã°ããŒã«ãªã©ãè±å¯ãªIDEãµããŒããæäŸããéçºè ã®çç£æ§ãå€§å¹ ã«åäžãããããšãã§ããŸãã
å®è·µäŸïŒTypeScriptã®æŽ»çš
1. é£åæåããŒã¿ã®å®çŸ©
ãŸããé£åã®æ 逿åã衚ãããã®åãå®çŸ©ããããšããå§ããŸãããïŒ
interface Food {
name: string;
calories: number;
protein: number;
fat: number;
carbohydrates: number;
sodium?: number; // Optional property
vitamins?: Record; // Optional object for vitamins
}
const apple: Food = {
name: "Apple",
calories: 95,
protein: 0.3,
fat: 0.2,
carbohydrates: 25,
vitamins: {
"Vitamin C": 0.05,
"Vitamin A": 0.03,
},
};
function printFoodDetails(food: Food): void {
console.log(`Food: ${food.name}`);
console.log(`Calories: ${food.calories}`);
console.log(`Protein: ${food.protein}g`);
console.log(`Fat: ${food.fat}g`);
console.log(`Carbohydrates: ${food.carbohydrates}g`);
if (food.sodium) {
console.log(`Sodium: ${food.sodium}mg`);
}
if (food.vitamins) {
console.log("Vitamins:");
for (const vitamin in food.vitamins) {
console.log(` ${vitamin}: ${food.vitamins[vitamin]}`);
}
}
}
printFoodDetails(apple);
ãã®äŸã§ã¯ãé£åã®ããããã£ãšåãæå®ãã`Food`ã€ã³ã¿ãŒãã§ãŒã¹ãå®çŸ©ããŸãã`sodium`ãš`vitamins`ããããã£ã¯`?`èšå·ã§ç€ºããããªãã·ã§ã³ã§ããããã«ããããããªãŠã æ
å ±ã詳现ãªãã¿ãã³ãããã¡ã€ã«ãæããªãé£åã衚çŸã§ããŸãããã¿ãã³ã®ããã®`Record
2. ã¬ã·ãã®æ 逿åã®èšç®
ã¬ã·ãã®ç·ã«ããªãŒãèšç®ãã颿°ãäœæããŠã¿ãŸãããïŒ
interface RecipeIngredient {
food: Food;
quantity: number;
unit: string; // e.g., "g", "oz", "cup"
}
function calculateTotalCalories(ingredients: RecipeIngredient[]): number {
let totalCalories = 0;
for (const ingredient of ingredients) {
totalCalories += ingredient.food.calories * ingredient.quantity;
}
return totalCalories;
}
const recipeIngredients: RecipeIngredient[] = [
{
food: apple,
quantity: 2, // Two apples
unit: "serving",
},
{
food: {
name: "Banana",
calories: 105,
protein: 1.3,
fat: 0.4,
carbohydrates: 27,
},
quantity: 1,
unit: "serving",
},
];
const totalCalories = calculateTotalCalories(recipeIngredients);
console.log(`Total Calories: ${totalCalories}`); // Output: Total Calories: 295
ãã®äŸã¯ãTypeScriptã䜿çšããŠ`RecipeIngredient`ã®ãããªããè€éãªããŒã¿æ§é ãå®çŸ©ããæ¹æ³ãšãã¬ã·ãã®ç·ã«ããªãŒãèšç®ããéã«åå®å šæ§ãã©ã®ããã«åŒ·å¶ã§ãããã瀺ããŠããŸãã`calculateTotalCalories`颿°ã¯`RecipeIngredient`ãªããžã§ã¯ãã®é åãæåŸ ããåææã`Food`åã®`food`ããããã£ãš`number`åã®`quantity`ããããã£ãæã€ããšãä¿èšŒããŸããããã«ãããæ°éã«æ°å€ã®ä»£ããã«èª€ã£ãŠæååãæž¡ããªã©ã®ãšã©ãŒãé²ãããšãã§ããŸãã
3. ããŒã¿æ€èšŒ
TypeScriptã¯ããŒã¿æ€èšŒã«ã䜿çšã§ããŸããå€éšAPIããé£åæåããŒã¿ãååŸããããšãæ³åããŠã¿ãŠãã ãããåãå®çŸ©ãããã®åã«å¯ŸããŠããŒã¿ãæ€èšŒããããšãã§ããŸãã
interface ApiResponse {
success: boolean;
data?: Food;
error?: string;
}
async function fetchFoodData(foodName: string): Promise {
// Simulate fetching data from an API
return new Promise((resolve, reject) => {
setTimeout(() => {
const mockData: any = { // any type is used because the api response is not type-safe
name: foodName,
calories: Math.floor(Math.random() * 200),
protein: Math.random() * 5,
fat: Math.random() * 10,
carbohydrates: Math.random() * 30,
};
const isValidFood = (data: any): data is Food => {
return (typeof data.name === 'string' &&
typeof data.calories === 'number' &&
typeof data.protein === 'number' &&
typeof data.fat === 'number' &&
typeof data.carbohydrates === 'number');
};
if (isValidFood(mockData)) {
resolve({ success: true, data: mockData });
} else {
resolve({ success: false, error: "Invalid food data" });
}
}, 500);
});
}
fetchFoodData("Mango")
.then((response) => {
if (response.success && response.data) {
console.log("Food data:", response.data);
} else {
console.error("Error fetching food data:", response.error);
}
})
.catch((error) => {
console.error("An unexpected error occurred:", error);
});
ãã®äŸã§ã¯ãããŒã¿ã®ååŸãæåããå Žåã®ããŒã¿ãŸãã¯ãšã©ãŒã¡ãã»ãŒãžã®ããããã蚱容ãã`ApiResponse`åãå®çŸ©ããŠããŸãã`fetchFoodData`颿°ã¯APIããã®ããŒã¿ååŸãã·ãã¥ã¬ãŒãããã¬ã¹ãã³ã¹ãåè¿°èªã䜿çšããŠ`Food`ã€ã³ã¿ãŒãã§ãŒã¹ã«æºæ ããŠãããã©ããããã§ãã¯ããŸãã`isValidFood`颿°ã¯åè¿°èªã䜿çšããŠ`mockData`ã`Food`ã€ã³ã¿ãŒãã§ãŒã¹ã«æºæ ããŠããããšãä¿èšŒããŸããããŒã¿ãæå¹ãªå Žåã`ApiResponse`ã®`data`ãã£ãŒã«ãã§è¿ãããããã§ãªããã°ãšã©ãŒã¡ãã»ãŒãžãè¿ãããŸãã
æ é€ããŒã¿ã®ã°ããŒãã«ãªèæ ®äºé
äžçèŠæš¡ã§æ é€ããŒã¿ãæ±ãå Žåãé£åæåãé£äºã¬ã€ãã©ã€ã³ã枬å®åäœã®ã°ãã€ãã«æ³šæããããšãéèŠã§ãã以äžã«ããã€ãã®èæ ®äºé ã瀺ããŸãïŒ
- é£åæåè¡šïŒ åœãå°åããšã«ç¬èªã®é£åæå衚ããããåãé£åã§ãæ é€çŽ ã®å€ãç°ãªãå ŽåããããŸããäŸãã°ãç±³åœã§ã¯USDA National Nutrient Databaseãåºã䜿çšãããŠããŸãããä»ã®åœã§ã¯Canadian Nutrient FileãEuroFIRé£åæåããŒã¿ããŒã¹ãªã©ã®ç¬èªã®åœå ããŒã¿ããŒã¹ãããå ŽåããããŸãã
- é£äºã¬ã€ãã©ã€ã³ïŒ æšå¥šããã1æ¥ã®æåéïŒRDIïŒããã®ä»ã®é£äºã¬ã€ãã©ã€ã³ã¯åœã«ãã£ãŠç°ãªããŸãã察象ãšãªãéå£ã«é©ããã¬ã€ãã©ã€ã³ã䜿çšããããšãéèŠã§ããäŸãã°ããããªãŠã ã®æåæšå¥šéã¯åœã«ãã£ãŠå€§ããç°ãªããäžéšã®åœã§ã¯ä»ãããé«ãäžéãèšå®ããŠããŸãã
- 枬å®åäœïŒ å°åã«ãã£ãŠç°ãªã枬å®åäœã䜿çšãããããšããããŸããäŸãã°ãã°ã©ã ãããªã°ã©ã ã䜿çšããåœãããã°ããªã³ã¹ããã³ãã䜿çšããåœããããŸããæ£ç¢ºãªèšç®ãä¿èšŒããããã«ã¯ãåäœãæ£ãã倿ããããšãéèŠã§ãã
- èšèªïŒ åœéçãªããŒã¿ãæ±ãéã«ã¯ãé£ååãææãªã¹ãã®ããŒã«ã©ã€ãŒãŒã·ã§ã³ãšç¿»èš³ã®å¿ èŠæ§ãèæ ®ããããšãéèŠã§ãã
- æåçæåæ§ïŒ æ é€åæããŒã«ãéçºããéã«ã¯ãæåçããã³å®æçãªé£äºå¶éã«æ³šæããŠãã ãããäŸãã°ãäžéšã®æåã§ã¯è±èãçèãªã©ç¹å®ã®é£åã®æ¶è²»ã«ç¹å®ã®å¶éãããå ŽåããããŸãã
ãããã®èª²é¡ã«å¯ŸåŠããããã«ãTypeScriptã䜿çšããŠãããŸããŸãªããŒã¿åœ¢åŒãé£äºã¬ã€ãã©ã€ã³ã枬å®åäœãåŠçã§ããæè»ã§é©å¿æ§ã®ãããœãããŠã§ã¢ãäœæã§ããŸããäŸãã°ãæ§æãã¡ã€ã«ã䜿çšããŠå°ååºæã®é£äºã¬ã€ãã©ã€ã³ãåäœå€æä¿æ°ãä¿åããããšãã§ããŸããããã«ãTypeScriptã€ã³ã¿ãŒãã§ãŒã¹ã䜿çšããŠããŒã¿æ§é ãå®çŸ©ããããšã§ãæ°ããããŒã¿ã»ãããçµ±åãããéã«å®¹æã«é©å¿ã§ããŸãã
é£åç§åŠã®ããã®é«åºŠãªTypeScriptæ©èœ
åºæ¬çãªåãã§ãã¯ãè¶ ããŠãTypeScriptã¯é£åç§åŠã¢ããªã±ãŒã·ã§ã³ã§ç¹ã«åœ¹ç«ã€ããã€ãã®é«åºŠãªæ©èœãæäŸããŸãïŒ
- ãžã§ããªã¯ã¹ïŒ ãžã§ããªã¯ã¹ã䜿çšãããšãããŸããŸãªçš®é¡ã®ããŒã¿ã§æ©èœããåå©çšå¯èœãªã³ãŒããäœæã§ããŸããäŸãã°ãåæå¯Ÿè±¡ã®ç¹å®ã®æ é€çŽ ã«é¢ä¿ãªããé£åãªã¹ãã®å¹³åæ é€çŽ å€ãèšç®ãããžã§ããªãã¯é¢æ°ãäœæã§ããŸãã
- å ±çšäœåïŒUnion TypesïŒïŒ å ±çšäœåã䜿çšãããšã倿°ãç°ãªãåã®å€ãä¿æã§ããããã«ãªããŸããããã¯ãæ°å€ãæååãšããŠè¡šçŸãããå¯èœæ§ã®ããæ é€çŽ å€ãªã©ãç°ãªã圢åŒã®ããŒã¿ãæ±ãå Žåã«äŸ¿å©ã§ãã
- åã¬ãŒãïŒ åã¬ãŒãã䜿çšãããšãæ¡ä»¶ãããã¯å ã§å€æ°ã®åãçµã蟌ãããšãã§ããŸããããã¯ãå ±çšäœåãæ±ãå Žåããå€éšãœãŒã¹ããã®ããŒã¿ãæ€èšŒããå Žåã«åœ¹ç«ã¡ãŸãã
- ãã³ã¬ãŒã¿ïŒ ãã³ã¬ãŒã¿ã¯ãã¯ã©ã¹ã颿°ã«ã¡ã¿ããŒã¿ã远å ããæ¹æ³ãæäŸããŸããããã¯ãããŒã¿æ€èšŒããã®ã³ã°ãªã©ã®æ©èœãå®è£ ããããã«äœ¿çšã§ããŸãã
äŸïŒæ é€åæã«ããããžã§ããªã¯ã¹ã®äœ¿çš
function calculateAverage(foods: T[], nutrient: K): number {
let sum = 0;
let count = 0;
for (const food of foods) {
if (typeof food[nutrient] === 'number') { // Only process if the nutrient is a number
sum += food[nutrient] as number; // Type assertion to number
count++;
}
}
return count > 0 ? sum / count : 0;
}
const foods: Food[] = [
{ name: "Apple", calories: 95, protein: 0.3, fat: 0.2, carbohydrates: 25 },
{ name: "Banana", calories: 105, protein: 1.3, fat: 0.4, carbohydrates: 27 },
{ name: "Orange", calories: 62, protein: 1.2, fat: 0.2, carbohydrates: 15 },
];
const averageCalories = calculateAverage(foods, "calories");
console.log(`Average Calories: ${averageCalories}`);
const averageProtein = calculateAverage(foods, "protein");
console.log(`Average Protein: ${averageProtein}`);
// Demonstrate with optional property - this will return 0 because Food does not have 'sodium' property defined directly in all objects.
const averageSodium = calculateAverage(foods, "sodium");
console.log(`Average Sodium: ${averageSodium}`);
ãã®äŸã¯ããžã§ããªã¯ã¹ã䜿çšããŠãé£åãªã¹ãå ã®ä»»æã®æ°å€æ é€çŽ ã®å¹³åå€ãèšç®ããããã®åå©çšå¯èœãªé¢æ°ãäœæããæ¹æ³ã瀺ããŠããŸãã`<T extends Food, K extends keyof T>`æ§æã¯ã2ã€ã®ãžã§ããªãã¯åãã©ã¡ãŒã¿ãå®çŸ©ããŸãã`T`ã¯`Food`ã€ã³ã¿ãŒãã§ãŒã¹ãæ¡åŒµããå¿ èŠãããã`K`ã¯`T`åã®ããŒã§ããå¿ èŠããããŸããããã«ããã`nutrient`ãã©ã¡ãŒã¿ã`Food`ã€ã³ã¿ãŒãã§ãŒã¹ã®æå¹ãªããããã£ã§ããããšãä¿èšŒãããŸãã
å®äžçã§ã®å¿çš
- æ é€è¡šç€ºãœãããŠã§ã¢ïŒ äŒæ¥ã¯TypeScriptã䜿çšããŠãããŸããŸãªåœã®èŠå¶èŠä»¶ã«æºæ ããæ é€è¡šç€ºãçæããããã®å ç¢ãªãœãããŠã§ã¢ãæ§ç¯ã§ããŸãã
- ã¬ã·ãåæããŒã«ïŒ ããŒãããã¬ãŒãã¬ã·ãéçºè ã¯ãTypeScriptã䜿çšããŠãã¬ã·ãã®æ 逿åãèªåçã«èšç®ããããŒã«ãäœæã§ããŸãã
- é£äºèšç»ã¢ããªã±ãŒã·ã§ã³ïŒ å»çå°éå®¶ãå人ã¯ãTypeScriptã䜿çšããŠãå¥åº·çã§ãã©ã³ã¹ã®åããé£äºãèšç»ããã®ã«åœ¹ç«ã€ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸãã
- é£åæåããŒã¿ããŒã¹ïŒ ç ç©¶è ãçµç¹ã¯ãTypeScriptã䜿çšããŠãå æ¬çãªé£åæåããŒã¿ããŒã¹ãéçºããã³ç¶æã§ããŸãã
çµè«
TypeScriptã¯ãé£åç§åŠããã³æ é€åæãœãããŠã§ã¢ã®ä¿¡é Œæ§ãä¿å®æ§ãæ¡åŒµæ§ã匷åããããã®åŒ·åãªæ¹æ³ãæäŸããŸããéçåä»ããæäŸããããšã§ãTypeScriptã¯éçºããã»ã¹ã®æ©ã段éã§ãšã©ãŒãæ€åºããã®ã«åœ¹ç«ã¡ãããå ç¢ã§ä¿¡é Œæ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ã«ã€ãªãããŸãããžã§ããªã¯ã¹ãå ±çšäœåãªã©ã®é«åºŠãªæ©èœã«ãããæ é€ããŒã¿ã®è€éããåŠçã§ããæè»ã§åå©çšå¯èœãªã³ãŒããäœæã§ããŸããé£åç§åŠã®åéãé²åãç¶ããã«ã€ããŠãTypeScriptã¯ããããµããŒããããœãããŠã§ã¢ãæ§ç¯ããäžã§ãŸããŸãéèŠãªåœ¹å²ãæããã§ãããã
ããªããé£åç§åŠè ããœãããŠã§ã¢éçºè ããããã¯åã«é£åé¢é£ãœãããŠã§ã¢ã®å質åäžã«é¢å¿ã®ãã人ã§ãã£ãŠããTypeScriptã®å©ç¹ãæ¢æ±ããããšãæ€èšããŠãã ãããåå®å šæ§ãæ¡çšããããšã§ãäžçã®é£åããã³æ é€ã³ãã¥ããã£ã®ããã«ããä¿¡é Œæ§ãé«ããä¿å®ããããã圱é¿åã®ããããŒã«ãæ§ç¯ã§ããŸãã
ãããªãåŠç¿ã®ããã«
- TypeScriptå ¬åŒããã¥ã¡ã³ãïŒ https://www.typescriptlang.org/
- ãªã³ã©ã€ã³TypeScriptãã¥ãŒããªã¢ã«ïŒ UdemyãCourseraãfreeCodeCampãªã©ã®ãã©ãããã©ãŒã ã¯ãåå¿è ããçµéšè±å¯ãªéçºè ãŸã§ã察象ãšããåªããTypeScriptã³ãŒã¹ãæäŸããŠããŸãã
- é£åæåããŒã¿ããŒã¹ïŒ USDA National Nutrient DatabaseãCanadian Nutrient FileãEuroFIRé£åæåããŒã¿ããŒã¹ãªã©ã®ãªãœãŒã¹ã調ã¹ãŠã¿ãŸãããã
- ãªãŒãã³ãœãŒã¹ã®TypeScriptãããžã§ã¯ãïŒ GitHubãªã©ã®ãã©ãããã©ãŒã ã§é£åç§åŠãæ é€åæã«é¢é£ãããªãŒãã³ãœãŒã¹ãããžã§ã¯ããæ¢ããTypeScriptãå®éã«ã©ã®ããã«äœ¿çšãããŠãããã確èªããŠãã ããã